<template>
  <div class="plan-management">
    <h2>培训计划管理制度</h2>
    <div class="operation-buttons">
      <div class="left-buttons">
        <el-button icon="el-icon-back" @click="handleBack()">返回</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="resetForm('planForm')">新增</el-button>
        <el-button type="info" icon="el-icon-document" @click="showSystemDialog">制度查看</el-button>
      </div>
      <div class="right-buttons">
        <el-button type="primary" icon="el-icon-search" @click="showSearchDialog">查询</el-button>
      </div>
    </div>

    <!-- 制度内容对话框 -->
    <el-dialog title="培训计划管理制度" :visible.sync="systemDialogVisible" width="70%" class="system-dialog">
      <div class="system-content">
        <h3>1. 目的</h3>
        <p>为了规范公司培训管理工作，提高培训工作的计划性和有效性，特制定本制度。</p>

        <h3>2. 适用范围</h3>
        <p>本制度适用于公司各部门、各岗位的培训工作。</p>

        <h3>3. 职责</h3>
        <p>3.1 人力资源部负责：</p>
        <ul>
          <li>制定公司年度培训计划</li>
          <li>组织实施培训计划</li>
          <li>培训效果评估和总结</li>
        </ul>

        <h3>4. 培训类型</h3>
        <p>4.1 岗前培训：</p>
        <ul>
          <li>新员工入职培训</li>
          <li>岗位技能培训</li>
          <li>安全教育培训</li>
        </ul>

        <p>4.2 在职培训：</p>
        <ul>
          <li>业务技能提升培训</li>
          <li>管理能力培训</li>
          <li>专业知识培训</li>
        </ul>

        <p>4.3 专项培训：</p>
        <ul>
          <li>特殊岗位培训</li>
          <li>资质认证培训</li>
          <li>法律法规培训</li>
        </ul>

        <h3>5. 培训计划管理</h3>
        <p>5.1 培训需求分析：</p>
        <ul>
          <li>部门需求调研</li>
          <li>岗位要求分析</li>
          <li>员工能力评估</li>
        </ul>

        <p>5.2 计划制定：</p>
        <ul>
          <li>确定培训目标</li>
          <li>选择培训方式</li>
          <li>安排培训时间</li>
          <li>编制培训预算</li>
        </ul>

        <p>5.3 计划实施：</p>
        <ul>
          <li>准备培训材料</li>
          <li>组织培训活动</li>
          <li>记录培训情况</li>
        </ul>

        <p>5.4 效果评估：</p>
        <ul>
          <li>培训考核</li>
          <li>效果评估</li>
          <li>持续改进</li>
        </ul>
      </div>
    </el-dialog>

    <!-- 查询对话框 -->
    <el-dialog title="查询培训计划" :visible.sync="searchDialogVisible" width="50%">
      <el-form :model="searchForm" ref="searchForm" label-width="100px">
        <el-form-item label="培训类型">
          <el-select v-model="searchForm.trainingType" placeholder="请选择培训类型" style="width: 100%">
            <el-option label="岗前培训" value="岗前培训"></el-option>
            <el-option label="在职培训" value="在职培训"></el-option>
            <el-option label="专项培训" value="专项培训"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划年度">
          <el-date-picker
            v-model="searchForm.planYear"
            type="year"
            placeholder="选择年份"
            value-format="yyyy"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="searchDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="searchRecords">查询</el-button>
      </div>
    </el-dialog>

    <!-- 查询结果对话框 -->
    <el-dialog title="培训计划列表" :visible.sync="resultDialogVisible" width="90%">
      <el-table 
        :data="searchResults" 
        border 
        style="width: 100%"
      >
        <el-table-column prop="planYear" label="计划年度" width="100" align="center"></el-table-column>
        <el-table-column prop="trainingType" label="培训类型" width="120" align="center"></el-table-column>
        <el-table-column prop="trainingProject" label="培训项目" width="150" align="center"></el-table-column>
        <el-table-column prop="targetParticipants" label="培训对象" width="150" align="center"></el-table-column>
        <el-table-column prop="planStartDate" label="计划开始日期" width="120" align="center"></el-table-column>
        <el-table-column prop="planEndDate" label="计划结束日期" width="120" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="viewRecord(scope.row)">查看</el-button>
            <el-button type="text" @click="editRecord(scope.row)">编辑</el-button>
            <el-button type="text" style="color: #F56C6C;" @click="deleteRecord(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 主表单 -->
    <el-form :model="planForm" ref="planForm" :rules="rules" label-width="120px" class="plan-form">
      <div class="form-section">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="计划年度" prop="planYear">
              <el-date-picker
                v-model="planForm.planYear"
                type="year"
                placeholder="选择年份"
                value-format="yyyy"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训类型" prop="trainingType">
              <el-select v-model="planForm.trainingType" placeholder="请选择培训类型" style="width: 100%">
                <el-option label="岗前培训" value="岗前培训"></el-option>
                <el-option label="在职培训" value="在职培训"></el-option>
                <el-option label="专项培训" value="专项培训"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训项目" prop="trainingProject">
              <el-input v-model="planForm.trainingProject"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="培训对象" prop="targetParticipants">
              <el-input v-model="planForm.targetParticipants"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划人数" prop="plannedParticipants">
              <el-input-number v-model="planForm.plannedParticipants" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训课时" prop="trainingHours">
              <el-input-number v-model="planForm.trainingHours" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始日期" prop="planStartDate">
              <el-date-picker
                v-model="planForm.planStartDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束日期" prop="planEndDate">
              <el-date-picker
                v-model="planForm.planEndDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="培训目标" prop="trainingObjectives">
          <el-input type="textarea" v-model="planForm.trainingObjectives" rows="3"></el-input>
        </el-form-item>

        <el-form-item label="培训内容" prop="trainingContent">
          <el-input type="textarea" v-model="planForm.trainingContent" rows="3"></el-input>
        </el-form-item>

        <el-form-item label="培训方式" prop="trainingMethod">
          <el-input type="textarea" v-model="planForm.trainingMethod" rows="2"></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="planForm.remark" rows="2"></el-input>
        </el-form-item>
      </div>

      <!-- 表单操作按钮 -->
        <div class="form-actions">
        <el-button @click="resetForm('planForm')">重置</el-button>
          <el-button type="primary" @click="submitForm('planForm')">保存</el-button>
        </div>
      </el-form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'TrainingPlan',
  data() {
    return {
      loading: false,
      searchDialogVisible: false,
      resultDialogVisible: false,
      searchResults: [],
      searchForm: {
        trainingType: '',
        planYear: ''
      },
      planForm: {
        planYear: '',
        trainingType: '',
        trainingProject: '',
        targetParticipants: '',
        plannedParticipants: 0,
        trainingHours: 0,
        planStartDate: '',
        planEndDate: '',
        trainingObjectives: '',
        trainingContent: '',
        trainingMethod: '',
        remark: '',
        status: '未开始'
      },
      rules: {
        planYear: [
          { required: true, message: '请选择计划年度', trigger: 'change' }
        ],
        trainingType: [
          { required: true, message: '请选择培训类型', trigger: 'change' }
        ],
        trainingProject: [
          { required: true, message: '请输入培训项目', trigger: 'blur' }
        ],
        targetParticipants: [
          { required: true, message: '请输入培训对象', trigger: 'blur' }
        ],
        plannedParticipants: [
          { required: true, message: '请输入计划人数', trigger: 'blur' }
        ],
        trainingHours: [
          { required: true, message: '请输入培训课时', trigger: 'blur' }
        ],
        planStartDate: [
          { required: true, message: '请选择计划开始日期', trigger: 'change' }
        ],
        planEndDate: [
          { required: true, message: '请选择计划结束日期', trigger: 'change' }
        ],
        trainingObjectives: [
          { required: true, message: '请输入培训目标', trigger: 'blur' }
        ],
        trainingContent: [
          { required: true, message: '请输入培训内容', trigger: 'blur' }
        ]
      },
      systemDialogVisible: false
    }
  },
  methods: {
    getStatusType(status) {
      switch (status) {
        case '未开始':
          return 'info'
        case '进行中':
          return 'warning'
        case '已完成':
          return 'success'
        case '已取消':
          return 'danger'
        default:
          return ''
      }
    },
    handleBack() {
      // 返回上一页
      this.$router.back()
    },
    showSearchDialog() {
      this.searchDialogVisible = true
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    async searchRecords() {
      // 实现查询逻辑
    },
    async submitForm(formName) {
      // 实现保存逻辑
    },
    async viewRecord(record) {
      // 实现查看逻辑
    },
    editRecord(record) {
      // 实现编辑逻辑
    },
    async deleteRecord(record) {
      // 实现删除逻辑
    },
    showSystemDialog() {
      this.systemDialogVisible = true
    }
  }
}
</script>

<style scoped>
.plan-management {
  padding: 20px;
  background-color: #f5f7fa;
}

.operation-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left-buttons, .right-buttons {
  display: flex;
  gap: 10px;
}

.plan-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #dcdfe6;
}

/* 表格样式 */
::v-deep .el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}

::v-deep .el-table td {
  vertical-align: middle;
}

/* 输入框样式 */
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-textarea__inner {
  font-family: inherit;
}

/* 添加制度内容样式 */
.system-dialog {
  max-height: 80vh;
}

.system-content {
  padding: 20px;
  line-height: 1.6;
  max-height: 60vh;
  overflow-y: auto;
}

.system-content h3 {
  margin: 20px 0 10px;
  color: #303133;
  font-size: 16px;
  font-weight: bold;
}

.system-content p {
  margin: 10px 0;
  color: #606266;
}

.system-content ul {
  margin: 10px 0;
  padding-left: 20px;
  color: #606266;
}

.system-content li {
  margin: 5px 0;
}

/* 设置滚动条样式 */
.system-content::-webkit-scrollbar {
  width: 6px;
}

.system-content::-webkit-scrollbar-thumb {
  background-color: #909399;
  border-radius: 3px;
}

.system-content::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}

/* 调整对话框内容的间距 */
::v-deep .el-dialog__body {
  padding: 0;
}
</style> 